import Q from "../../lib/qunee-es";
import "leaflet/dist/leaflet.css"
// import * as L from "leaflet/dist/leaflet-src.esm"
import "leaflet.chinatmsproviders"
// import { options } from "mdbootstrap";
class MapGraph extends Q.Graph {
	constructor(map) {
		// this.graph = graph;
		var container = map._container;
		container.style.zIndex = 0;
		var canvas = document.createElement("div");
		// canvas.style.width = "100%";
		// canvas.style.height = "100%";
		canvas.style.position = "absolute";
		canvas.style.left = "0px";
		canvas.style.top = "0px";
		canvas.style.right = "0px";
		canvas.style.bottom = "0px";
		canvas.style.overflow = "hidden";
		canvas.style.zIndex = 400;

		container.appendChild(canvas);
		super(canvas)
		// Q.doSuperConstructor(this, MapGraph, [canvas]);

		// this.map = map;
		this.mapShowing = true;
		this.enableInertia = false;
		this.enableWheelZoom = false;
		this.enableDoubleClickToOverview = false;
		this.originAtCenter = false;
		this.setMap(map);
		this.visibleFilter = function (d) {
			if (d instanceof Q.Node && d.zoom && map._zoom < d.zoom) {
				return false;
			}
			return true;
		};
	}

	createNodeByLonLat(name, lon, lat) {
		var l = this.toLatLng(lat, lon);
		var p = this.getPixelFromLonLat(l);
		var node = this.createNode(name, p.x, p.y);
		node.lonLat = l;
		return node;
	}
	// toLonLat(lon, lat) {
	// 	return new L.latLng(lat, lon);
	// }
	toLatLng(lat, lon) {
		return new L.latLng(lat, lon);
	}
	getPixelFromLonLat(lonLat) {
		return this.map.latLngToContainerPoint(lonLat, this.map._zoom);
	}
	getLonLatFromPixel(x, y) {
		return this.map.containerPointToLatLng([x, y]);
	}
	setMap(map) {
		this.map = map;
		//        map._zoomAnimated = false;

		this.map.on("zoomstart", this.hideGraph, this);
		this.map.on("zoomend", this.invalidateMap, this);
		this.map.on("movestart", this.hideGraph, this);
		this.map.on("move", this.hideGraph, this);
		this.map.on("moveend", this.invalidateMap, this);

		this.html.ondblclick = function (evt) {
			if (this.getElementByMouseEvent(evt)) {
				Q.stopEvent(evt);
			}
		}.bind(this);
		//        this.onmousewheel = function(evt){
		//            if (this._scaling) {
		//                return;
		//            }
		//            this._scaling = true;
		//            Q.callLater(function() {
		//                delete this._scaling;
		//            }, this, 200);
		//            this.map.setZoomAround(this.globalToLocal(evt), this.map._zoom + (evt.delta > 0 ? 1 : -1));
		//        }
		this.interactionDispatcher.addListener(function (evt) {
			if (evt.kind == Q.InteractionEvent.ELEMENT_MOVE_END) {
				var datas = evt.datas;
				Q.forEach(
					datas,
					function (data) {
						var pixel = this.toCanvas(data.location.x, data.location.y);
						data.lonLat = this.getLonLatFromPixel(pixel.x, pixel.y);
					},
					this
				);
			}
		}, this);
	}
	hideGraph() {
		this.html.style.visibility = "hidden";
	}
	showGraph() {
		this.html.style.visibility = "";
	}
	translate(tx, ty) {
		super.translate(tx,ty)
		// Q.doSuper(this, MapGraph, "translate", arguments);
		this.map.panBy([-tx, -ty], { animate: false });
	}
	resetVisibility() {
		this.forEach(function (e) {
			if (e.invalidateVisibility) {
				e.invalidateVisibility(true);
			}
		});
	}
	invalidateMap() {
		if (this._timer) {
			clearTimeout(this._timer);
		}
		this._timer = setTimeout(this.updateNodes.bind(this), 100);
	}
	updateNodes() {
		delete this._timer;
		this._invalidateMapFlag = false;
		this.translateTo(0, 0, 1, false);
		this.resetVisibility();
		this.forEach(function (d) {
			if (d instanceof Q.Node && d.lonLat) {
				var l = d.lonLat;
				var p = this.getPixelFromLonLat(l);
				d.location = p;
			}
		}, this);
		this.showGraph();
	}
}
// Q.extend(MapGraph, Q.Graph);


// var map, graph;
function createMap(options) {
	var {target, lat, lng, zoom} = options
	var map = L.map(target).setView([lat, lng], zoom);
	var normalm = L.tileLayer.chinaProvider('GaoDe.Normal.Map', {maxZoom: 18, minZoom: 3});
	map.addLayer(normalm);
	var osm = new L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png');
	//mapabc china map
	L.control.layers({OSM: osm, 高德: normalm}).addTo(map);
	return map;
}

function createMapGraph(target) {
	var map = initMap(target, 31.25, 121.45, 7);
	var graph = new MapGraph(map);
	setTimeout(function(){
		graph.updateViewport();
		graph.callLater(function(){
			map.invalidateSize();
		})
	})
	// var flowingSupport = new FlowingSupport(graph);
	// graph.callLater(function(){
	// 	flowingSupport.start();
	// })
	return graph


	// function createEdge(name, a, b) {
	// 	var edge = graph.createEdge(name, a, b);
	// 	edge.setStyle(Q.Styles.ARROW_TO, false);
	// 	flowingSupport.addFlowing(edge, 3);
	// 	return edge;
	// }

	// function createNode(name, lon, lat) {
	// 	var node = graph.createNodeByLonLat(name, lon, lat);
	// 	node.image = Q.Graphs.server;
	// 	node.size = {width: 20};
	// 	//node.setStyle(Q.Styles.SHAPE_FILL_COLOR, "#58F");
	// 	//node.setStyle(Q.Styles.SHAPE_FILL_GRADIENT, new Q.Gradient(Q.Consts.GRADIENT_TYPE_LINEAR, [Q.toColor(0x44EEEEEE), Q.toColor(0x44000000)], null, Math.PI / 2));
	// 	node.setStyle(Q.Styles.LABEL_OFFSET_Y, 10);
	// 	node.setStyle(Q.Styles.LABEL_PADDING, 3);
	// 	node.setStyle(Q.Styles.LABEL_BORDER, 0.5);
	// 	node.setStyle(Q.Styles.LABEL_BACKGROUND_COLOR, Q.toColor(0xCCEEEEEE));
	// 	return node;
	// }

// 	graph.callLater(function () {
// 		Q.loadJSON("/static/china_city.json", function (json) {
// 			var nodes = [];
// 			for (var name in json) {
// 				var v = json[name];
// 				var first = null;
// 				for (var n in v) {
// 					var info = v[n];
// 					var node = createNode(n, info.x, info.y);
// 					node.size = {width: 20};
// 					node.tooltip = n + "\n" + info.x + ", " + info.y;

// 					info.x = parseFloat(info.x);
// 					info.y = parseFloat(info.y);

// //                        var node2 = createNode(null, info.x + Math.random(), info.y + Math.random());
// //                        node2.size = {width: 8};
// //                        node2.zoom = 6;
// //                        var node3 = createNode(null, info.x + Math.random(), info.y + Math.random());
// //                        node3.size = {width: 6};
// //                        node3.zoom = 10;
// //                        var node4 = createNode(null, info.x + Math.random(), info.y + Math.random());
// //                        node4.size = {width: 4};
// //                        node4.zoom = 12;

// 					if (!first) {
// 						first = node;
// 						nodes.push(node);
// 					} else {
// 						node.zoom = 8;
// 						node.size = {width: 10};
// 						node.name = null;
// 						if (Q.randomBool()) {
// 							createEdge(node, first).setStyle(Q.Styles.EDGE_COLOR, "#888");
// 						}
// 					}
// 				}
// 			}

// 			var i = 0;
// 			while (i++ < nodes.length) {
// 				var a = nodes[Q.randomInt(nodes.length)];
// 				var b = nodes[Q.randomInt(nodes.length)];
// 				if (b != a) {
// 					createEdge(a, b);
// 					if(Q.randomInt(3) > 1){
// 						createEdge(a, b);
// 					}
// 				}
// 			}

// 			//alert(graph.graphModel.length)
// 		});
// 	})
}
// init();


function FlowingSupport(graph) {
	this.flowMap = {};
	this.graph = graph;
}
FlowingSupport.prototype = {
	flowMap: null,
	length: 0,
	gap: 40,
	graph: null,
	addFlowing: function (edgeOrLine, count, byPercent) {
		var flowList = this.flowMap[edgeOrLine.id];
		if(!flowList){
			flowList = this.flowMap[edgeOrLine.id] = [];
			this.length++;
		}
		count = count || 1;
		while(--count >= 0){
			var ui = new Q.ImageUI("/static/img/power/flow.png");
			ui.layoutByPath = true;
			ui.position = {x: 0, y: 0};
			ui.size = {width: 20};
			ui.renderColor = "#F00";
			flowList.push(ui);
			flowList.byPercent = byPercent;
			edgeOrLine.addUI(ui);
		}
	},
	removeFlowing: function(id){
		var flowList = this.flowMap[id];
		if(!flowList){
			return;
		}
		var edgeOrLine = this.graph.getElement(id);
		if(edgeOrLine){
			flowList.forEach(function(ui){
				edgeOrLine.removeUI(ui);
			})
		}
		this._doRemove(id);
	},
	_doRemove: function(id){
		delete this.flowMap[id];
		this.length--;
	},
	timer: null,
	perStep: 10,
	stop: function(){
		clearTimeout(this.timer);
	},
	start: function(){
		if(this.timer){
			clearTimeout(this.timer);
		}
		var offset = 0;
		var scope = this;
		scope.timer = setTimeout(function A() {
			if (!scope.length) {
				scope.timer = setTimeout(A, 2000);
				offset = 0;
				return;
			}
			offset += 1;
			for(var id in scope.flowMap){
				var ui = scope.graph.getUI(id);
				if(!ui){
					scope._doRemove(id);
					continue;
				}
				var lineLength = ui.length;
				if(!lineLength){
					continue;
				}
				var flowList = scope.flowMap[id];
				if(flowList.byPercent){
					//按百分比，0 - 1跑完整条线，线长度不同，速度也不同，跑完一圈的时间相同
					var x = offset * 2;
					var gap = 15;
					scope.flowMap[id].forEach(function(ui){
						ui.position = {x: (x % 100) / 100, y: 0};
						x += gap;
					});
				}else{
					//按固定距离移动，速度相同，线条越长跑完一圈的时间越长
					var x = offset * scope.perStep;
					scope.flowMap[id].forEach(function(ui){
						ui.position = {x: x % lineLength, y: 0};
						x += scope.gap;
					});
				}
				scope.graph.invalidateUI(ui);

				//dashed line
				var data = ui.data;
				if(data instanceof Q.Edge){
					if(data.getStyle(Q.Styles.EDGE_LINE_DASH)){
						data.setStyle(Q.Styles.EDGE_LINE_DASH_OFFSET, -offset);
					}
				}else if(data instanceof Q.ShapeNode){
					if(data.getStyle(Q.Styles.SHAPE_LINE_DASH)) {
						data.setStyle(Q.Styles.SHAPE_LINE_DASH_OFFSET, -offset);
					}
				}
			}
			scope.timer = setTimeout(A, 200);
		}, 200);
	}
}


export { createMap,MapGraph}